<template>
  <transition name="el-fade-in-linear">
    <div class="login-pop-container" v-if="popShow" @click="popShow = false">
      <div class="login-pop" @click.stop="clickpop">
        <el-tabs type="border-card" v-model="activeName">
          <el-tab-pane label="登 录" name="login">
            <div>
              <div>
                <img class="avatar" src="https://img2.baidu.com/it/u=1950977217,4151841346&fm=26&fmt=auto" alt="">
              </div>
              <table-row label="用户名" must items-center>
                <el-input
                    v-model="loginForm.username"
                    placeholder="请输入用户名或者账号"
                    clearable
                />
              </table-row>
              <table-row label="密码" must items-center>
                <el-input
                    v-model="loginForm.password"
                    placeholder="请输入密码"
                    clearable
                    show-password
                />
              </table-row>
              <div style="text-align: center">
                <el-button type="primary" plain @click="login">登 录</el-button>
                <el-button plain @click="activeName='register'">去注册</el-button>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane label="注 册" name="register">
            <div style="height: 100%">
              <table-row label="用户名" must items-center>
                <el-input
                    v-model="registerForm.username"
                    placeholder="请输入用户名"
                    clearable
                />
              </table-row>
              <table-row label="密码" must items-center>
                <el-input
                    v-model="registerForm.password"
                    show-password
                    placeholder="请输入密码"
                    clearable
                />
              </table-row>
              <table-row label="确认密码" must items-center>
                <el-input
                    v-model="passwordSure"
                    :class="{warning:warning}"
                    show-password
                    placeholder="请再次输入密码"
                    clearable
                />
              </table-row>
              <table-row label="岗位" items-center>
                <el-input
                    v-model="registerForm.job"
                    placeholder="你的岗位"
                    clearable
                />
              </table-row>
              <table-row label=公司 items-center>
                <el-input
                    v-model="registerForm.company"
                    placeholder="你所在的公司"
                    clearable
                />
              </table-row>
              <table-row label="大学" items-center>
                <el-input
                    v-model="registerForm.university"
                    placeholder="你所在的大学/毕业院校"
                    clearable
                />
              </table-row>
              <table-row label="个人介绍" items-center>
                <el-input
                    type="textarea"
                    :autosize="{minRows:2,maxRows:3}"
                    resize="none"
                    style="width: 360px"
                    v-model="registerForm.introduction"
                    placeholder="请输入个人介绍"
                    clearable
                />
              </table-row>
              <div style="text-align: center">
                <el-button plain @click="reset">重 置</el-button>
                <el-button type="success" plain @click="register">注 册</el-button>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </div>
    </div>
  </transition>
</template>

<script>
import TableRow from "@/components/table-row";
import user from "@/api/user";
export default {
  name: "login-pop",
  components: {TableRow},
  data() {
    return {
      activeName: 'login',
      popShow: false,
      loginForm: {
        username: '',
        password: ''
      },
      registerForm: {
        username: '',
        password: '',
        job: '',
        university: '',
        company: '',
        introduction: ''
      },
      passwordSure: ''
    };
  },
  computed:{
    warning(){
      return this.registerForm.password !== this.passwordSure
    }
  },
  methods: {
    reset() {
      Object.keys(this.registerForm).forEach((key) => {
        this.registerForm[key] = ''
      })
      this.passwordSure = ''
    },
    register() {
      user.register(this.registerForm)
          .then((res) => {
            if(res.code === 200){
              this.$success(res.msg)
              this.reset()
            }else{
              this.$error(res.msg)
            }
          })
          .catch((err) => {
            this.$error(err)
          })
    },
    clickpop() {
      return false;
    },
    login() {
      if(this.loginForm.username && this.loginForm.password){
        user.login(this.loginForm)
            .then((res) => {
              if(res.code === 200){
                this.$success('登录成功')
                localStorage.setItem('banma-user',res.data)
                this.popShow = false
                setTimeout(()=>{
                  this.$router.go(0)
                },1000)

              }else{
                this.$error(res.msg)
              }
            })
            .catch((err) => {
              this.$error(err)
            })
      }else{
        this.$warning('账号或密码不能为空')
      }
    }
  }
}
</script>

<style lang="less" scoped>
.login-pop-container{
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  background-color: rgba(0,0,0,.3);
  .flex-center(center);
  .login-pop{
    .size(600px,600px);
    background-color: #ffffff;
  }
}
.avatar{
  .size(200px);
  margin: auto;
}
/deep/ .el-tabs--border-card{
  height: 100%;
}
/deep/ .el-input {
  width: 360px !important;
}
.warning{
  /deep/ .el-input__inner{
    border: 1px solid #ffa9a9;
  }
}

</style>